<template>
  <div class="homePro frame_content" style="padding-bottom: 20px">
    <div class="headerPro">
      <div style="line-height:32px">
        <a href="home.html" target="_blank">新窗口打开</a>
        <span class="roomNum"> 房间号:(150391)</span>
        <span class="safeCode"> 安全码:(b4d4bfb5518e0fcd)</span>
        <b style="color:red; margin-left: 18px"> 安卓下载： </b>
        <a
          :href="download.android"
          target="_blank"
          class="downLoad1"
          >打开
        </a>
        <a
          @click="copy1"
          class="btn copy downLoad1Copy"
          :data-clipboard-text="download.android"
          >复制</a
        >
        <b style="color: red;margin-left: 18px"> IOS下载： </b>
        <a
          :href="download.ios"
          target="_blank"
          class="downLoad1"
          >打开
        </a>
        <a
          @click="copy2"
          class="btn copy downLoad2Copy"
          :data-clipboard-text="download.ios"
          >复制</a
        >
        <b style="color:red; margin-left: 18px"> IOS安装说明： </b>
        <a
          :href="download.ios"
          target="_blank"
          class="downLoad1"
          >打开
        </a>
      </div>
      <div style="line-height:32px">
        <span class="dpAcc">打盘账号:(140.205.220.96:80.4090)</span>
        <span class="dpPass"> 打盘密码:(761645)</span>
        <b style="color: red; margin-left: 18px"> 助手下载：</b>
        <a
          href="https://www.lanzous.com/i5ybvub"
          target="_blank"
          class="downLoad3"
        >
          打开
        </a>
        <a
          @click="copy3"
          class="btn copy downLoad3Copy"
          data-clipboard-text="https://www.lanzous.com/i5ybvub"
          >复制</a
        >
      </div>
      <div style="line-height:32px" class="gameList">
        <a
          href="javascript:void(0);"
          v-for="(item, index) in color_list"
          :key="item.id"
          @click="chagecolor(index,'A')"
          :class="[
            'btn',
             { btndanger: item.status == 2, 'btn-success': item.status == 1 }
          ]"
          >{{ item.lottert_name}}<span>{{ item.status == 1 ? '关闭' : '开启' }}</span></a
        >
      <span 
        @click="chagecolor('red_envelope','B')"
        :class="['btn',{ btndanger: red_envelope == 2, 'btn-success': red_envelope == 1 }]">{{red_envelope == 1 ? "红包 关闭" : "红包 开启"}}</span>
      </div>
    </div>
    <table class="table common table-bordered">
      <thead>
        <tr style="color: red">
          <th colspan="2">今日总上分</th>
          <th colspan="3" class="totalUp">{{homeList.add }}</th>
          <th colspan="1">今日总回分</th>
          <th colspan="3" class="totalDown">{{ homeList.take }}</th>
        </tr>
        <tr>
          <th>头像</th>
          <th>用户Id</th>
          <th>账户余额</th>
          <th>账户名称</th>
          <th>上/下分金额</th>
          <th>申请时间</th>
          <th>上分/下分</th>
          <th>游戏名称</th>
          <!-- <th>管理操作</th> -->
        </tr>
      </thead>
      <tbody id="list">
        <tr v-for="item in homeList.list" :key="item.id">
          <td>
            <img :src="item.logo" />
          </td>
          <td>{{ item.account_id }}</td>
          <td>{{ item.balance }}</td>
          <td>{{ item.nickname }}</td>
          <td>
            <span
              :style="item.pay_money > 0 ? 'color: red' : 'color: blue'"
              style="font-weight: bold"
              >{{
                item.pay_money > 0
                  ? "上" + item.pay_money
                  : "回" + -item.pay_money
              }}{{
            }}</span>
          </td>
          <td>{{ item.create_time }}</td>
          <td>
            <span
              :style="
                item.change == 'add'
                  ? item.status == 2
                    ? 'color: #3ADF00'
                    : 'color:red'
                  : 'color : blue'
              "
            >
              {{
                item.status == 0
                  ? item.change == "add"
                    ? "申请上分"
                    : "申请下分"
                  : item.status == 1
                  ? item.change == "add"
                    ? item.manual_status == 1
                      ? "手动上分成功(手动上分)"
                      : "上分成功"
                    : item.manual_status == 1
                    ? "手动下分成功(手动下分)"
                    : "下分成功"
                  : item.chenge == "add"
                  ? "上分失败(手动拒绝)"
                  : "下分失败(手动拒绝)"
              }}
            </span>
          </td>
          <td>{{ lottery[item.lottery_id] }}</td>
          <!-- <td>
            <div
              ref="score"
              :style="item.status == 0 ? 'display:block' : 'display: none'"
            >
              <a
                href="javascript:void(0);"
                @click="AgreeScore(item)"
                style="color:#08c"
                >同意</a
              >
              <i>|</i>
              <a
                href="javascript:void(0);"
                @click="cancelScore(item)"
                style="color:#08c"
                >取消</a
              >
            </div>
          </td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import http from "@/utils/http";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      danger: "btndanger",
      lottery: [
        "重庆时时彩",
        "PK拾",
        "幸运飞艇",
        "极速赛车",
        "澳洲5",
        "澳洲10"
      ],
      btnlists: []
    };
  },
  computed: {
    ...mapState("home", ["homeList","color_list","download","red_envelope"])
  },
  methods: {
    ...mapActions("home", ["getHomeList","get_color","switch_btn"]),
    getDigital(){
      let that = this;
      let token=sessionStorage.getItem('token');
      http
        .post(
          `/api/login/agent/lottery_status?token=${token}`
        )
        .then(response => {
          console.log(response,'response');
          that.btnlists = response.data.lottery;
        });
    },
    chagecolor(index,type) {
      var token=sessionStorage.getItem('token');
      // console.log(index,"id?");
      // console.log(this.red_envelope,"2222");
      let lottery = index;
      let status;
      var that = this;
      if(type == "A"){
        status = that.color_list[index].status;
      } else {
        status = that.red_envelope;
      }
      if (status == 1) {
        status=2;
      } else {
        status=1;
      }
      that.switch_btn({lottery,status})
    },
    // 同意上下分
    AgreeScore(item) {
      let token=sessionStorage.getItem('token');
      http
        .post(
          `/api/login/add_balance/edit?token${token}=&id=${item.id}`
        )
        .then(response => {
          console.log(response);
          this.getHomeList();
        });
    },
    // 拒绝上下分
    cancelScore(item) {
      http
        .post(
          `/api/login/add_balance/failure?id=${item.id}&token=2Q3ntNqyo5eaLmXITABb`
        )
        .then(response => {
          console.log(response);
          this.getHomeList();
        });
    },
    copy1() {
      let clipboard = new Clipboard(".downLoad1Copy");
      clipboard.on("success", () => {
        alert("复制成功");
        clipboard.destroy(); //使用destroy可以清楚缓存
      });
      clipboard.on("error", () => {
        alert("failed");
        clipboard.destroy();
      });
    },
    copy2() {
      let clipboard = new Clipboard(".downLoad2Copy");
      clipboard.on("success", () => {
        alert("复制成功");
        clipboard.destroy(); //使用destroy可以清楚缓存
      });
      clipboard.on("error", () => {
        alert("failed");
        clipboard.destroy();
      });
    },
    copy3() {
      let clipboard = new Clipboard(".downLoad3Copy");
      clipboard.on("success", () => {
        alert("复制成功");
        clipboard.destroy(); //使用destroy可以清楚缓存
      });
      clipboard.on("error", () => {
        alert("failed");
        clipboard.destroy();
      });
    },
  },
  created() {
    this.getHomeList();
    //  请求页面所有数据
    this.getDigital();
    this.get_color();
    
  }
};
</script>

<style>
.frame_content {
  position: absolute;
  top: 144px;
  left: 0;
  right: 0;
  bottom: 0;
}
.homePro {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
}
.headerPro {
  font-size: 120%;
  padding: 4px 10px 14px 20px;
}
.headerPro a {
  color: #08c;
  text-decoration: none;
}
.headerPro a:hover,
a:focus {
  color: #005580;
  text-decoration: underline;
}
.headerPro b {
  font-weight: bold;
}
.headerPro .btn {
  margin-right: 8px;
  display: inline-block;
  margin-bottom: 0px;
  font-size: 14px;
  line-height: 20px;
  color: rgb(51, 51, 51);
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.75) 0px 1px 1px;
  vertical-align: middle;
  cursor: pointer;
  background-color: rgb(245, 245, 245);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
  box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px inset,
    rgba(0, 0, 0, 0.05) 0px 1px 2px;
  padding: 4px 12px;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgb(179, 179, 179);
  border-radius: 4px;
}
.headerPro .btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
  background-position: 0 -15px;
  transition: background-position 0.1s linear;
  background-color: #e6e6e6;
}
.headerPro .btn-success {
  color: rgb(255, 255, 255);
  text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px;
  background-color: rgb(91, 183, 91);
  background-image: linear-gradient(rgb(98, 196, 98), rgb(81, 163, 81));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.headerPro .btndanger {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #bd362f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ee5f5b),
    to(#bd362f)
  );
  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.headerPro .btndanger:hover {
  color: #fff;
  background-color: #bd362f;
  *background-color: #a9302a;
}
.headerPro .btn-success:hover {
  color: #fff;
  background-color: #51a351;
}
.table-bordered {
  width: 96%;
  margin: auto;
  border: 1px solid #ddd;
  border-collapse: separate;
  border-left: 0;
  border-radius: 4px;
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}
.table thead th {
  vertical-align: bottom;
}
.table th {
  background-color: #eaeaea;
}
.table td,
.table th {
  padding-top: 8px;
  padding-bottom: 4px;
  line-height: 20px;
}
.table-bordered th,
.table-bordered td {
  border-left: 1px solid #ddd;
}
.table th {
  font-weight: bold;
}
.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table th,
.table td {
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
}
#list img {
  display: block;
  width: 30px;
  height: 30px;
}
</style>
